<template>
  <div v-if="task">
    <task-step
      v-if="task && task.status"
      :taskStatus="task.status"
    />

    <task-control
      :execFactoryId="task.execFactoryId"
      v-if="task && task.status"
      :taskStatus="task.status"
      :taskId="task.id"
      @onSuccess="getTaskDetail()"
    />

    <el-tabs>
      <el-tab-pane label="任务信息">
        <table class="striped-border-table">
          <tr>
            <th>任务</th>
            <td>{{ task.name }}</td>
          </tr>
          <tr>
            <th>商品</th>
            <td>{{ order.orderGoods && order.orderGoods.name }}</td>
          </tr>
          <tr>
            <th>商品类型</th>
            <td>
              {{
                order.orderGoods &&
                order.orderGoods.goodsType &&
                order.orderGoods.goodsType.desc
              }}
            </td>
          </tr>
          <tr>
            <th>数量</th>
            <td>{{ order.count }}</td>
          </tr>
          <tr>
            <th>任务分配时间</th>
            <td>
              {{ task.createTime }}
            </td>
          </tr>
          <tr v-if="order.photoZip">
            <th>图片下载</th>
            <td>
              <!-- <el-image
                style="width: 100px; height: 100px"
                :src="`${order.photoZip}?qrcode`"
                fit="contain"
              ></el-image> -->
              <!-- <vue-qr  :text="order.photoZip"   :size="150"></vue-qr> -->
              <div>
                <el-link
                  :href="order.photoZip"
                  target="_blank"
                >点击下载</el-link>
              </div>
            </td>
          </tr>
          <tr>
            <th>备注</th>
            <td>
              {{ task.memo }}
            </td>
          </tr>
        </table>
      </el-tab-pane>
      <el-tab-pane
        label="图片信息"
        lazy
      >
        <div v-if="order.orderGoods">
          <div
            :key="item.id"
            v-for="item in order.orderGoods.photoSpecs"
          >
            <el-divider content-position="left">
              <el-tag
                v-if="item.name"
                type="success"
              >{{ item.name }}</el-tag>
              <el-tag style="margin-left: 10px">{{
                `宽: ${item.width} mm  高: ${item.height} mm DPI: ${item.dpi}`
              }}</el-tag>
            </el-divider>
            <div>{{ item.memo }}</div>
            <div>
              <el-image
                :key="i.id"
                v-for="i in item.photos"
                class="photo"
                fit="cover"
                :preview-src-list="item.photos.map((i) => i.photo)"
                :src="i.photo"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import taskApi from '@/api/task'
import taskStep from '@/components/order/TaskStep'
import taskControl from '@/components/order/TaskControl'
export default {
  props: ['id'],
  name: 'info',
  components: {
    taskStep,
    taskControl
  },
  data () {
    return {
      task: null,
      order: {}
    }
  },
  computed: {
    orderPercentage () {
      return 0
    }
  },
  created () {
    this.getTaskDetail()
  },
  methods: {
    /**
     * 查询订单详情
     */
    getTaskDetail () {
      taskApi.getById(this.id).then((res) => {
        if (res.data) {
          this.task = Object.assign({}, res.data)

          this.order = this.task.order
        }
      })
    }
    /**
     * 查询订单相关流水信息
     */
  }
}
</script>

<style lang="scss">
.striped-border-table {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  width: 100%;
  margin: 10px 0;
  font-size: 13px;
  border-collapse: collapse;
  th,
  td {
    border: 1px solid #d3dce6;
    line-height: 20px;
    padding: 5px;
    text-align: center;
  }
  th {
    width: 40%;
  }
  tr:hover {
    background-color: #f5f5f5;
  }
}

.image-uploader {
  margin: 5px 10px;
}

.photo {
  width: 180px;
  height: 180px;
}

.inline-group {
  .el-form-item {
    margin-right: 10px !important;
    display: inline-block;
    .el-form-item__label {
      width: auto !important;
    }

    .el-form-item__content {
      margin-left: 0 !important;
      display: inline-block;
    }
  }
}
</style>
